<template>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#fff" text-color="#fff"
             active-text-color="#000000">
        <el-button class="buttonimg">
            <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
        </el-button>
        <el-submenu index="2" class="submenu">
            <!-- <template slot="title">{{user.userRealName}}</template> -->
            <template slot="title"><span style="color: #000000">{{ "张三" }}<div class="el-icon-user"></div></span></template>
<!--            <el-menu-item index="2-1" style="color: #000000">设置</el-menu-item>-->
            <el-menu-item @click="$router.push({path: '/views/index/detail'})" index="2-2" style="color: #000000">个人中心</el-menu-item>
            <el-menu-item @click="exit()" index="2-3" style="color: #000000">退出</el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>

export default {
    name: 'navcon',
    data() {
        return {
            collapsed: true,
            imgshow: require('../assets/img/show.png'),
            imgsq: require('../assets/img/sq.png'),
        }
    },
    //原型scrm时打开 并collapsed: false,
    // mounted() {
    //     this.toggle(true)
    // },
    // 创建完毕状态(里面是操作)
    created() {
        this.user = JSON.parse(localStorage.getItem('userdata'))
    },
    methods: {
        exit() {
            this.$confirm('退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    setTimeout(() => {
                        this.$store.commit('logout', 'false')
                        this.$router.push({path: '/scrmLogin'})
                        this.$message({
                            type: 'success',
                            message: '已退出登录!'
                        })
                    }, 1000)
                    // loginout()
                    //   .then(res => {
                    //     if (res.success) {
                    //       //如果请求成功就让他2秒跳转路由
                    //       setTimeout(() => {
                    //         this.$store.commit('logout', 'false')
                    //         this.$router.push({ path: '/login' })
                    //         this.$message({
                    //           type: 'success',
                    //           message: '已退出登录!'
                    //         })
                    //       }, 1000)
                    //     } else {
                    //       this.$message.error(res.msg)
                    //       this.logining = false
                    //       return false
                    //     }
                    //   })
                    //   .catch(err => {
                    //     // 获取图形验证码
                    //     this.getcode()
                    //     this.logining = false
                    //     this.$message.error('退出失败，请稍后再试！')
                    //   })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
        },
        // 切换显示
        toggle(showtype) {
            this.collapsed = !showtype
            this.$root.Bus.$emit('toggle', this.collapsed)
        }
    }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
}

.submenu {
    float: right;
}

.buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
}

.showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
}

.showimg:active {
    border: none;
}
</style>
